import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    InteractionManager,
    Text,
} from 'react-native';
import Common from '../common/constants';
import {SearchBar, Tag, WhiteSpace, WingBlank} from 'antd-mobile';

import TabBarViewContainer from '../containers/TabBarViewContainer';


const citys = [
    {'name' : '沈阳'},
    {'name' : '鞍山'},
    {'name' : '铁岭'},
    {'name' : '抚顺'},
    {'name' : '长春'},
    {'name' : '葫芦岛'},
    {'name' : '丹东'},
    {'name' : '锦州'},
    {'name' : '辽阳'},
    {'name' : '朝阳'},
    {'name' : '沈阳1'},
    {'name' : '沈阳2'},
    {'name' : '沈阳3'},
    {'name' : '沈阳1'},
    {'name' : '沈阳2'},
    {'name' : '沈阳3'},

];


export default class City extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            city : '',
        }
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            const {dispatch} = this.props;
            //dispatch(fetchBanner());
            
            //dispatch(fetchFeeds(page, canLoadMore, isRefreshing, isLoading));
        });
    }

    render(){

        let { city } = this.props;

        return (
            <View style={styles.main}>
              <SearchBar
                value=''
                placeholder="输入城市名查询"
                onSubmit={value => console.log(value, 'onSubmit')}
                onClear={value => console.log(value, 'onClear')}
                onFocus={() => console.log('onFocus')}
                onBlur={() => console.log('onBlur')}
                onCancel={() => console.log('onCancel')}
                //onChange={this.onChange}
              />
              <WhiteSpace size="lg" />
              <WingBlank size="lg">
                <Text>请选择城市</Text>
              </WingBlank>
              <WhiteSpace size="lg" />
              <View style={styles.citys}>
                {citys.map((obj, i) => {
                    return (
                        <Tag key={i} style={styles.city} 
                            data-seed={obj.name}
                            selected={obj.name == this.props.city}
                            onChange={(selected) => {
                                console.log(selected);
                                console.log(obj);
                                //this.setState({city: obj.name});
                                this.props.city = obj.name;
                                storage.save({
                                    key: 'city',  // 注意:请不要在key中使用_下划线符号!
                                    data: { 
                                      city: obj.name,
                                    },
                                    
                                    // 如果不指定过期时间，则会使用defaultExpires参数
                                    // 如果设为null，则永不过期
                                    expires: 1000 * 3600
                                });

                                this.props.navigator.push({
                                    component: TabBarViewContainer,
                                })

                                //this.props.navigator.pop();
                            }}
                            >
                            {obj.name}
                        </Tag>
                    );
                })}
              </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    main : {
        marginTop : 65
    },

    citys : {
        flexDirection : 'row',
        flexWrap : 'wrap',
        paddingLeft : 5,
        paddingRight : 5,
    },

    city : {
        width : Common.window.width / 4 - 20,
        marginLeft : 5,
        marginRight : 5,
        marginBottom : 10,
    }

})